<!DOCTYPE html>
<html lang="zh">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>css布局、动画练习</title>
    <link rel="stylesheet" href="../05/main.css">
    <style>
        #none {
            display: none;
        }

        #head {
            font-size: 25px;
            border: 1px rgb(223, 222, 221) solid;
            width: 99%;
            height: 60px;
            margin-bottom: 10px;
        }

        #main {
            border: 1px rgb(223, 222, 221) solid;
            width: 97%;
            /* height: 200px; */
            margin-bottom: 10px;
            padding: 5px;
            overflow: hidden;
        }

        #left {
            border: 1px rgb(223, 222, 221)solid;
            width: 42%;
            height: 100px;
            float: left;
        }

        #middle {
            border: 1px rgb(223, 222, 221) solid;
            width: 200px;
            height: 100px;
            float: left;
        }

        #right {
            border: 1px rgb(223, 222, 221)solid;
            width: 55%;
            height: 100px;
            margin-left: 5px;
            float: left;
        }

        .back {
            width: 100px;
            height: 100px;
            border: 1px #ccc solid;

        }

        .relative {
            position: relative;
            top: 150px;
        }

        .absolute {
            position: absolute;
            top: 150px;
        }

        .bg {
            background-color: #fcc;
        }

        .fl {
            float: left;
            width: 33%;
        }

        .container {
            nargin: 0 auto;
            overflow: hidden;
            width: 1000px;
        }

        .toku {
            color: ghostwhite;
            font-size: 30px;
        }

        .toku2 {
            margin: 0 auto
        }

        div {
            color: rgb(107, 73, 28);
            text-align: center;
        }
    </style>
</head>

<body>
    <header>
        <h1>
            css布局 动画练习
        </h1>
    </header>
    <main>
        <section>
            <h2>阿❥拉❥贡</h2>
            <p><img src="../public/images/阿拉贡好帅.jpg" alt="阿拉贡好帅❥" width="280px" height="220px"></p>
            <p class="toku">！！！Aragorn好帅！！！</p>
            <div id="none">阿拉贡太帅了</div>

        </section>
        <section class="bg-demo">
            <div id="head">人皇——阿拉贡 <div>深邃的大眼睛 俗称“不洗头的大步佬”</div>
            </div>
            <div id="main">
                <div id="left">埃尔隆德为其取名"埃斯特尔"，意为“希望”</div>
                <!-- <div id="middle">中间</div> -->
                <div id="right">他正式治理国家后使用“伊力萨·泰尔康塔”这一名号，意为“精灵之石·大步佬”</div>
                <div style="clear: both;">
                    即伊力萨王，白树之君。是英国作家J.R.R.托尔金所著小说《魔戒》中的人物。他是阿拉松二世与吉尔蕾恩之子，埃西铎的第三十九代嫡孙，第十六任登丹人酋长（第三纪元2933年–3019年），
                    刚铎及亚尔诺重联王国开国国王（即刚铎第三十四任国王，亚尔诺第二十六任国王，第三纪元3019年–第四纪元120年）。他是魔戒远征队的九名成员之一，也是魔戒圣战时期的核心人物。
                </div>

            </div>
        </section>
        <section>
            <h2>POSITION</h2>
            <div class="back">lalala</div>
            <div class="container">
                <div class="fl">
                    <h3>作曲 霍华德·肖</h3>
                    <p>歌词为昆雅语,也就是高等精灵语</p>
                    <p>正是阿拉贡的祖先伊伦迪尔在3000多年前</p>
                    <p class="bg ">带着努曼诺尔忠诚派流亡中土时所说的语句</p>
                    <p>是王者归来片尾，阿拉贡加冕后</p>
                    <p>所唱的加冕之歌</p>
                </div>
                <div class="fl">
                    <h3>《The Return of The King》</h3>
                    <p>Et Earello Endorenna utúlien</p>
                    <p>越过大海我来到中土世界</p>
                    <p class="bg relative">直到世界末日！</p>
                    <p>Sinome maruvan ar Hildinyar</p>
                    <p>我和我的子嗣当永居于此地</p>
                    <p>tenn' Ambar-metta! </p>
                </div>
                <div class="fl" style="position: relative;">
                    <h3>演唱 维戈·莫特森</h3>
                    <p>Out of the Great Sea to Middle-earth I am come. </p>
                    <p>In this place I will abide,</p>
                    <p class="bg absolute">and my heirs,</p>
                    <p>unto the ending of the world.</p>
                    <p>I love Aragorn</p>
                    <code>He's so beautiful that I cant help myself
                </code>
                </div>
            </div>
        </section>
        <section>
            <p>---</p>
            <h2>动画</h2>
            <p>变形演示</p>
            <style>
                .lalala {
                    background: #f9fffa;
                    width: 100px;
                    height: 100px;
                    text-align: center;
                    line-height: 100px;
                    border-radius: 100px;
                    transform: scale(1.5);
                    transform: rotate(40deg);

                }

                .lalala1 {
                    background: #f9fffa;
                    width: 100px;
                    height: 100px;
                    text-align: center;
                    line-height: 100px;
                    transform: perspective(100px) rotateX(70deg);
                }

                .lalala2 {
                    transform: skew(30deg);
                    background: #c2d4c5;
                    width: 150px;
                    height: 100px;
                    text-align: center;
                    line-height: 100px;
                }
            </style>
            <div class="lalala">
                啦啦啦
            </div>
            <div class="lalala1">
                啦啦啦
            </div>
            <div class="lalala2">阿拉贡</div>

            <p>动画演示</p>
            <style>
                .box {
                    background: #f9fffa;
                    transition-property: all;
                    transition-duration: 1s;
                    transition-timing-function: linear;
                    transition-delay: 1s;
                    width: 100px;
                    height: 100px;
                    text-align: center;
                    line-height: 100px;
                }

                .box:hover {
                    background: #b16634;
                    border-radius: 100px;
                    color: lightgoldenrodyellow;

                }
            </style>
            <div class="box">
                潘多拉</div>
        </section>

    </main>
    <footer style="clear: both;">
        <span>|人间失智|</span><span>|小练习|</span><span>|修改于2020年4月5日|</span></footer>
</body>

</html>